<script>
	import * as AudioUtils from '@/utils/AudioUtils.js';
	import storejs from '@/utils/storejs.js';
	import {mapMutations} from 'vuex';
	
	
	
	export default {
		globalData: {
			//全局音频上下文
			bgmAudioCtx: null,   
		},
		// 应用启动
		onLaunch: function() {
			// this.initBgm();
			
			console.log('App Launch');
			
			let bgmIndex = storejs.get('bgmIndex') || 0;
			
			console.log("初始化背景音乐")
			
			
			/**
			 * 背景音乐全局上下文
			 */
			const bgmAudioCtx = uni.createInnerAudioContext();
			
			bgmAudioCtx.volume = 0.2;
			//循环
			bgmAudioCtx.loop = true;
			// 自动播放，浏览器中可能不允许自动播放，需要手动触发
			bgmAudioCtx.autoplay = true;
			// 设置音频播放模式
			bgmAudioCtx.sessionCategory = "ambient";
			getApp().globalData.bgmAudioCtx = bgmAudioCtx;
			
			// 监听事件
			bgmAudioCtx.onPlay(()=>{
				console.log("背景音乐开始播放...");
				this.setBgmPaused(false);
			});
			bgmAudioCtx.onPause((e)=>{
				console.log("背景音乐暂停播放...", e);
				this.setBgmPaused(true);
			})
			bgmAudioCtx.onStop((e)=>{
				console.log("背景音乐停止播放...", e);
				this.setBgmPaused(true);
			})
			bgmAudioCtx.onError((e)=>{
				console.error("背景音乐播放错误...", e);
				this.setBgmPaused(true);
			})
			bgmAudioCtx.onWaiting((e)=>{
				console.log("背景音乐音频加载中事件...", e);
			})
			
			// 播放音乐
			AudioUtils.playBGM(bgmAudioCtx, bgmIndex);
			// bgmAudioCtx.play();
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			...mapMutations('user', {
				setBgmPaused: 'setBgmPaused',
			}),
			/**
			 * 初始化背景音乐相关
			 */
			initBgm(){
				let bgmIndex = storejs.get('bgmIndex') || 0;
				
				console.log("初始化背景音乐")
				/**
				 * 背景音乐全局上下文
				 */
				const bgmAudioCtx = uni.createInnerAudioContext("bgm");
				
				bgmAudioCtx.volume = 0.4;
				//循环
				bgmAudioCtx.loop = true;
				// 自动播放，浏览器中可能不允许自动播放，需要手动触发
				bgmAudioCtx.autoplay = true;
				bgmAudioCtx.obeyMuteSwitch = false;
				// 设置音频播放模式
				bgmAudioCtx.sessionCategory = "ambient";
				getApp().globalData.bgmAudioCtx = bgmAudioCtx;
				
				
				// 监听事件
				bgmAudioCtx.onPlay(()=>{
					console.log("背景音乐开始播放...");
					this.setBgmPaused(false);
				});
				bgmAudioCtx.onPause((e)=>{
					console.log("背景音乐暂停播放...", e);
					this.setBgmPaused(true);
				})
				bgmAudioCtx.onStop((e)=>{
					console.log("背景音乐停止播放...", e);
					this.setBgmPaused(true);
				})
				bgmAudioCtx.onError((e)=>{
					console.error("背景音乐播放错误...", e);
					this.setBgmPaused(true);
				})
				bgmAudioCtx.onWaiting((e)=>{
					console.log("背景音乐音频加载中事件...", e);
				})
				
				// 播放音乐
				AudioUtils.playBGM(bgmAudioCtx, bgmIndex);
				// bgmAudioCtx.play();
			},
		},
	}
</script>

<style lang="scss">
	@import "libs/helang-flex.scss";
	
	/*每个页面公共css */
	image{
		display: block;
	}
	
	page{
		font-size: 28rpx;
		color: #333;
	}
	
	// 动画
	.transform-scale{
		transform:scale(1,1);
		transition: transform 0.1s ease 0s;
	}
	.transform-scale:active{
		transform:scale(0.95,0.95);
	}
	
	// 弹窗
	.global-popup{
		.shade{
			position: fixed;
			z-index: 10;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-color: rgba(33,33,33,0.5);
		}
		.content{
			position: fixed;
			z-index: 11;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			animation:globalPopup 0.2s ease-in-out 0s 1 normal;
		}
	}
	
	.def-title{
		color: #ffe6be;
		font-weight: bold;
		font-size: 36rpx;
		letter-spacing: 8rpx;
	}
	
	@keyframes globalPopup
	{
		from {transform: scale(0.3);}
		to {transform: scale(1);}
	}
</style>
